<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹性布局-活动方向(flex layout - flex direction)</title>
  <!-- 
    在CSS的flex布局中，flex-direction属性用于设置flex容器中主轴的方向。
    flex-direction属性说明： 
 
      1. row(默认)：主轴方向为水平方向，flex项目从左到右排列。 
      2. row-reverse：主轴方向为水平方向，flex项目从右到左排列。 
      3. column：主轴方向为垂直方向，flex项目从上到下排列。 
      4. column-reverse：主轴方向为垂直方向，flex项目从下到上排列。
   -->
   <style>
     .display-flex-dirction {
       display: flex;
       /* flex-direction属性 - 控制flex容器中主轴的方向
          row - 左到右
          row-reverse - 右到左
          column - 上到下
          column-reverse - 下到上
       */
       flex-direction: column-reverse;
       
       background-color: skyblue;
       width: 400px;
       height: 200px;
     }

     .item {
       width: 120px;
       height: 100px;
     }
   </style>
</head>
<body>

  <div class="display-flex-dirction">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <script src="./js/itemRandomColor.js"></script>
  
</body>
</html>